<template>
	<view class="bgDefault default-page">
		<tn-nav-bar fixed>站点帮助</tn-nav-bar>
		
		<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
			<view class="container">
			  <tn-list-view
			    :card="true"
			    backgroundColor="#EFEFEF"
			  >
			  		<block v-for="(item, index) in list" :key="index">
			          <tn-list-cell @tap="detail(item)" :arrow="true" :arrowRight="true">{{item.title}}</tn-list-cell>
			        </block>
			  					
			  </tn-list-view>
			  
			  <view class="empty__item" v-if="list.length < 1 && !loading" style="margin-top: 200px;">
			    <tn-empty mode="search"></tn-empty>
			  </view>
			  
			</view>
		</view>
		
		<TemplateLoading :active="loading"></TemplateLoading>
	</view>
</template>

<script>
	import TemplateLoading from '../../components/loading.vue'
	import {articleList} from '@/api/user/help.js'
	export default {
		components:{TemplateLoading},
		data() {
			return {
				list:[],
				loading:false
			}
		},
		onLoad() {
			this.initData()
		},
		methods: {
			initData(){
				this.loading = true
				articleList({page:1,size:10,category_id:2}).then(res=>{
					this.list = res.data
					this.loading = false
				},err=>{
					this.loading = false
				})
			},
			detail(item){
				uni.navigateTo({
				  url: "/pages/user/article/article?id="+item.id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
  .bgDefault{
  	background: $tn-main-bg;
  }
  
  .default-page {
    width: 100vw;
    height: 100vh;
    /* display: flex; */
    align-items: center;
    justify-content: center;
  	font-family: "微软雅黑";
  }
  .container{
	  padding: 5px 10px 15px;
	  width: calc(100% - 30px);
	  background-color: #FFFFFF;
	  box-shadow: 0px 5px 25px 0px rgba(0, 3, 72, 0.1);
	  margin: 18px 15px 2px 15px;
	  border-radius: 10px;
	  position: relative;
	  align-items: center;
	  height: calc(100vh - (300rpx + env(safe-area-inset-bottom) / 2))
  }
  
  
</style>
